let path = require('path'),
    webpack = require('webpack'),
    merge = require('webpack-merge'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    {HtmlOrderCommonScriptPlugin} = require('./webpack.myPlugin.js'),
    commonConfig = require('./webpack.config.common.js');

/**
 * 开发环境Webpack打包配置，整合公共部分
 * @type {[type]}
 */
module.exports = merge(commonConfig, {
    devtool: 'inline-source-map',

    // 文件输出配置
    output: {
        // 设置路径，防止访问本地服务器相关资源时，被开发服务器认为是相对其的路径
        publicPath: 'http://localhost:8080/static/',
        // 输出所在目录
        //path: path.resolve(__dirname, './dist/'),
        // 开发环境使用热更新，方便编译，可以直接不用hash
        filename: '[name].js'
    },

    // 模块的处理配置，匹配规则对应文件，使用相应loader配置成可识别的模块
    module: {
        rules: [{
            test: /\.(png|gif|jpg)$/,
            // 处理图片，当大小在范围之内时，图片转换成Base64编码，否则将使用file-loader引入
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 8192
                }
            }]
        }, {
            test: /\.(eot|svg|ttf|otf|woff|woff2)\w*/,
            // 引入文件
            use: 'file-loader'
        }]
    },

    // 插件配置
    plugins: [
        // 提取公共模块文件
        /*new webpack.optimize.CommonsChunkPlugin({
            chunks: ['common'],
            // 开发环境下需要使用热更新替换，而此时common用chunkhash会出错，可以直接不用hash
            filename: '[name].js',
            name: 'common'
        }),*/
        // 设置编译文件页面文件资源模块的引入
        new HtmlWebpackPlugin({
            //图标
            favicon: './images/favicon.png',
            // 模版源文件
            template: './views/index_tpl.html',
            // 编译后的目标文件
            filename: './views/index.html',
            // 要处理的模块文件
            chunks: ['common','tabSlider', 'index'],
            // 插入到<body>标签底部
            inject: true
            //js/css内嵌到html
            //inlineSource : '.(js|css)$' 
        }),
        new HtmlWebpackPlugin({
            favicon: './images/favicon.png',
            template: './views/list_tpl.html',
            filename: './views/list.html',
            chunks: ['common','tabSlider', 'list'],
            inject: true
        }),
        // 热更新替换
        new webpack.HotModuleReplacementPlugin(),
        // 热更新时显示模块路径  在webpack3中使用会导致expose的全局变量无法使用，如jquery
        // new webpack.NamedModulesPlugin()
        // HtmlWebpackPlugin 运行后调整公共script文件在html中的位置，主要用于jQuery插件的引入
        new HtmlOrderCommonScriptPlugin({
            // commonName: 'vendor'
        })
    ]
});
